import styled, { css } from 'styled-components'
import { useTonConnectUI, useTonAddress } from '@tonconnect/ui-react';
import Cell from '../../component/Cell'
import { DetectorTypeInfo, PurchaseConfirm, PurchaseStatus } from '../../service/interface'
import Icon from '../../component/Icon'
import { useTranslation } from 'react-i18next'
import { useMemo } from 'react'
import Space from '../../component/Space'
import Message from '../../component/Message';

interface Props {
    data: DetectorTypeInfo;
    onClick?: (isBuy?: boolean) => void
}

const Container = styled(Cell)`
    
`

const Left = styled.div`
    display: flex;
    flex-direction: column;
`

const Image = styled(Icon)`
    width: 5rem;
    min-height: 3.1875rem;
`

const Name = styled.span`
    font-weight: 400;
    font-size: .75rem;
    color: #FFFFFF;
    opacity: 0.7;
    margin-top: .375rem;
`

const Content = styled.div`
    margin-left: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    .top {

    }
    .bottom {
        display: flex;
        justify-content: space-between;
        flex: 1;
        .left {
            display: flex;
            flex-direction: column;
            flex: 1;
            align-items: start;
        }
        .right {
            display: flex;
            align-items: center;
        }
    }
`

const Title = styled.div`
    font-weight: 400;
    font-size: .875rem;
    color: #EDA73B;
    text-align: start;
    
`
const Price = styled.div`
    font-weight: 400;
    font-size: .75rem;
    color: white;
    
`
const Time = styled.div`
    font-weight: 400;
    font-size: .75rem;
    color: white;
`

const DisableCss = css`
    background-color: rgba(1, 191, 191, 0.5);
`

const BuyableCss = css`
    background-color: rgb(2, 191, 191);
`

const UpgradeCss = css`
    background-color: #3FCF77;
`

const Upgrade = styled.div<{ $disable?: number, $status?: PurchaseStatus }>`
    white-space: pre-line;
    /* margin-top: .8125rem; */
    border-radius: .5rem;
    font-size: .625rem;
    color: white;
    padding: .25rem .3125rem;
    box-sizing: border-box;
    ${({ $disable, $status }) => $disable ? DisableCss : ($status === PurchaseStatus.Purchase ? BuyableCss : UpgradeCss)}
`

const Remain = styled.div`
    font-size: .5625rem;
    color: #3FCF77;
`

const Purchased = styled(Icon)`
    width: 3.5625rem;
`

const Item: React.FC<Props> = ({ data, onClick }) => {
    const { t } = useTranslation()
    const [tonConnectUI] = useTonConnectUI();
    const userFriendlyAddress = useTonAddress();

    const upgradeText = useMemo(() => {
        if (data.purchaseConfirm === PurchaseConfirm.Pendding) {
            return t('ton.detector.pendding')
        }

        if (data.purchaseStatus === PurchaseStatus.Purchase) {
            return t('ton.detector.purchase')
        }


        if (data.costAmount !== data.purchaseAmount) {
            return `${(Number(data.purchaseAmount)).toFixed(2)}${data.currency.toLowerCase()}\n${t('ton.detector.upgrade')}`
        }

        return t('ton.detector.upgrade')
    }, [data, t])

    const disable = useMemo(() => {
        return data.purchaseStatus === PurchaseStatus.None || data.purchaseConfirm === PurchaseConfirm.Pendding
    }, [data])

    const isHidden = useMemo(() => {
        return data.purchaseStatus === PurchaseStatus.None
    }, [data])

    const isPurchased = useMemo(() => (data.purchaseStatus === PurchaseStatus.Purchased && data.purchaseConfirm === PurchaseConfirm.Done), [data])

    const onUpgrade = () => {
        if (!tonConnectUI.connected || !userFriendlyAddress) {
            Message.info(t('ton.noConnect'))
            return
        }

        onClick?.(true)
    }

    return <Container
        icon={<Left>
            <Image src={data.imageUrl} />
            <Name>{data.title}</Name>
        </Left>}
        center={<Content>
            <div className='top'>
                <Title>{t('ton.detector.speed_rate', { rate: data.speed })}</Title>
            </div>
            <div className='bottom'>
                <div className='left'>
                    <Space minWidth='1' />
                    <Price>{`${t('ton.detector.price')}: ${data.costAmount}${data.currency.toLowerCase()}`}</Price>
                    <Space minWidth='1' />
                    <Time>{`${t('ton.detector.time')}: ${data.days === '-1' ?
                        t('ton.detector.permanent') :
                        `${data.days}${Number(data.addDays) ? `+${data.addDays}(${t('ton.detector.gift')})` : ''}`}`}</Time>
                    {isPurchased &&
                        <>
                            <Space minWidth='1' />
                            <Remain>{`${t('ton.detector.remaining')}: ${data.leftDays}${t('ton.detector.day')}`}</Remain>
                        </>}
                </div>
                <div className='right'>
                    {isPurchased ? <Purchased name='ton_purchased'></Purchased> : (isHidden ? undefined : <Upgrade
                        $disable={Number(disable)}
                        $status={data.purchaseStatus}
                        onClick={disable ? undefined : onUpgrade}
                    >{upgradeText}</Upgrade>)}
                </div>
            </div>
        </Content>}
    />
}

export default Item